<template>
  <!-- 组织架构 -->
  <div class="departments-container">
    <div class="app-container">
      <!-- 头部内容 -->
      <el-card class="tree-card" v-loading="loading">
        <!-- 用了一个行列布局 -->
        <el-row type="flex" justify="space-between" align="middle" style="height: 40px">
          <el-col :span="20">
            <span>江苏传智播客教育科技股份有限公司</span>
          </el-col>
          <el-col :span="4">
            <el-row type="flex">
              <!-- 两个内容 -->
              <el-col :span="12">{{ company.manager }}</el-col>
              <el-col :span="12">
                <!-- 下拉菜单 element -->
                <el-dropdown>
                  <span>
                    操作<i class="el-icon-arrow-down" />
                  </span>
                  <!-- 下拉菜单 -->
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item>添加子部门</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </el-card>

      <!-- 部门列表树形图 -->
      <!-- default-expand-all: 节点默认展开  -->
      <el-tree :data="deptsList" :props="defaultProps" default-expand-all>
        <!-- 用了一个行列布局 -->
        <template #default="{ data }">
          <el-row type="flex" justify="space-between" align="middle" style="height: 40px; width: 100%;">
            <el-col :span="20">
              <span>{{ data.name }}</span>
            </el-col>
            <el-col :span="4">
              <el-row type="flex" justify="end">
                <!-- 两个内容 -->
                <el-col>{{ data.name }}</el-col>
                <el-col>
                  <!-- 下拉菜单 element -->
                  <el-dropdown @command="handleCommand">
                    <span> 操作<i class="el-icon-arrow-down" /> </span>
                    <!-- 下拉菜单 -->
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item :command="{ type: 'add', data: data }">添加子部门</el-dropdown-item>
                      <el-dropdown-item :command="{ type: 'edit', data: data, id: data.id }">编辑部门</el-dropdown-item>
                      <el-dropdown-item :command="{ type: 'del', id: data.id }">删除部门</el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </template>
      </el-tree>

      <!-- 添加弹窗 -->
      <AddDept :showDialog="showDialog" @close-dialog="showDialog = false" :nodeData="nodeData" ref="addDeptDialog">
        <!-- 表单组件  el-form   label-width设置label的宽度   -->
        <!-- 匿名插槽 -->
        <el-form label-width="120px">
          <el-form-item label="部门名称">
            <el-input style="width:80%" placeholder="1-10个字符" />
          </el-form-item>
          <el-form-item label="部门编码">
            <el-input style="width:80%" placeholder="1-10个字符" />
          </el-form-item>
          <el-form-item label="部门负责人">
            <el-select style="width:80%" placeholder="请选择" />
          </el-form-item>
          <el-form-item label="部门介绍">
            <el-input style="width:80%" placeholder="1-300个字符" type="textarea" :rows="3" />
          </el-form-item>
        </el-form>
        <!-- el-dialog有专门放置底部操作栏的 插槽  具名插槽 -->
        <template #footer>
          <div>
            <el-button type="primary" size="small">确定</el-button>
            <el-button size="small">取消</el-button>
          </div>
        </template>
      </AddDept>
    </div>
  </div>
</template>

<script>
import { getDepartmentListAPI, delDeptsAPI } from '@/api/department'
import { tranListToTreeData } from '@/utils'
import AddDept from './components/AddDept'

export default {
  data() {
    return {
      deptsList: [], // 部门列表
      company: {}, // 公司信息
      defaultProps: {
        label: 'name'
      },
      showDialog: false, //添加弹框显示
      nodeData: {}, // 用于接收点击数据
      loading: false // 用来控制进度弹层的显示和隐藏
    }
  },
  components: {
    AddDept
  },
  created() {
    this.getDepartmentList()
  },
  methods: {
    // 添加
    handleCommand({ type, data, id }) {
      if (type === 'add') {
        // 添加子部门
        // console.log('获取点击数据', data)
        this.nodeData = data
        this.showDialog = true
      }
      if (type === 'del') {
        this.$confirm('您确定要删除这个部门吗?', '温馨提示').then(async () => {
          await delDeptsAPI(id)
          this.$message.success('删除成功')
          this.getDepartmentList()
        }).catch(err => { console.log(err) })
      }
      if (type === 'edit') {
        // console.log('编辑', data, id)
        this.nodeData = data
        this.showDialog = true
        this.$nextTick(() => {
          this.$refs.addDeptDialog.getDepartmentDetail(id)  // 调用子组件获取部门详情
        })
      }
    },
    // 获取部门列表
    async getDepartmentList() {
      this.loading = true
      const res = await getDepartmentListAPI()
      // console.log('部门列表', res.data.depts)
      this.company = {
        name: res.data.companyName,
        manager: '负责人'
      }
      this.deptsList = tranListToTreeData(res.data.depts, '')
      // console.log('树形图数据', this.deptsList)
      this.loading = false
    }
  }
}
</script>

<style lang="scss" scoped>
.tree-card {
  padding: 30px 30px;
  font-size: 14px;
}

.el-tree {
  ::v-deep {

    // 小三角的样式, 去掉默认的小三角的旋转效果
    .el-tree-node__expand-icon.expanded {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }

    // 有子节点 且未展开 +
    .el-icon-caret-right:before {
      background: url("~@/assets/common/add-circle.png") no-repeat 0 0;
      content: '';
      display: block;
      width: 16px;
      height: 16px;
      font-size: 16px;
      background-size: 16px;
    }

    // 有子节点 且已展开 -
    .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
      background: url("~@/assets/common/minus-circle.png") no-repeat 0 0;
      content: '';
      display: block;
      width: 16px;
      height: 16px;
      font-size: 16px;
      background-size: 16px;
    }

    // 没有子节点
    .el-tree-node__expand-icon.is-leaf::before {
      background: url("~@/assets/common/user-filling.png") no-repeat 0 0;
      content: '';
      display: block;
      width: 16px;
      height: 16px;
      font-size: 16px;
      background-size: 16px;
    }
  }
}
</style>
